<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
    </head>
    <style>
        .Loading {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.2);
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }

        .laodingCon {
            width: 50px;
            height: 120px;
        }

        .ball {
            -webkit-animation: ball 300ms cubic-bezier(0.165, 0.84, 0.44, 1)
                infinite alternate;
            -ms-animation: ball 300ms cubic-bezier(0.165, 0.84, 0.44, 1)
                infinite alternate;
            -moz-animation: ball 300ms cubic-bezier(0.165, 0.84, 0.44, 1)
                infinite alternate;
            animation: ball 300ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite
                alternate;
            height: 50px;
            width: 50px;
            background: url(http://www.njgep.com/images/loading-icon.png)
                no-repeat center;
            background-size: 100%;
        }

        .ballshadow {
            -webkit-animation: shadow 300ms cubic-bezier(0.165, 0.84, 0.44, 1)
                infinite alternate;
            animation: shadow 300ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite
                alternate;
            background: #000;
            bottom: -90px;
            height: 15px;
            width: 50px;
            -webkit-animation-delay: 0;
            animation-delay: 0;
            border-radius: 100%;
        }

        @-webkit-keyframes ball {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            100% {
                -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
            }
        }

        @keyframes ball {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            100% {
                -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
            }
        }

        @-webkit-keyframes shadow {
            0% {
                opacity: 0.2;
                -webkit-transform: scale(0.3);
                transform: scale(0.3);
            }

            100% {
                opacity: 0.05;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes shadow {
            0% {
                opacity: 0.2;
                -webkit-transform: scale(0.3);
                transform: scale(0.3);
            }

            100% {
                opacity: 0.05;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    </style>

    <body>
        <div id="_loading_page" class="Loading" :style="style">
            <div class="laodingCon">
                <div class="ball"></div>
                <div class="ballshadow"></div>
            </div>
        </div>
    </body>
</html>
